<template>
    <div id="ball">

        <div class="con_mid_tab">
            <!--标签栏目-->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation">
                    <a href="#two_color_ball" aria-controls="home" role="tab" data-toggle="tab">双色球</a>
                </li>
                <li role="presentation" >
                    <a href="#big_happy" aria-controls="home" role="tab" data-toggle="tab">大乐透</a>
                </li>
                <li role="presentation">
                    <a href="#3D" aria-controls="home" role="tab" data-toggle="tab">福彩3D</a>
                </li>
            </ul>

            <!--选项卡内容-->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="two_color_ball">
                    <ball-tab-content></ball-tab-content>
                </div>
                <div role="tabpanel" class="tab-pane" id="big_happy">
                  <p>敬请期待</p>
                </div>
                <div role="tabpanel" class="tab-pane" id="3D">                    <ball-tab-content></ball-tab-content>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import BallTabContent from "./BallTabContent";
    export default {
        name: "ball",
        components: {BallTabContent},
    }
</script>

<style scoped>

/*a链接*/
#ball .con_mid_tab .nav a{
    font-size: 16px;
    color: #555;
    border: 1px solid transparent;
}

/*激活下划线*/
#ball .con_mid_tab .nav li.active a{
  border-bottom: 2px solid red;
}

/*移入*/
#ball .con_mid_tab .nav a:hover{
    background: white;
    /*transform: rotate(20deg);*/
    transform: translate(10px, 10px);
    transition: 1s ease;
    color: red;
}

/*第二个tab字体动画*/
#ball #big_happy{
    font-size: 14px;
    color: red;
    animation: changeText 3s infinite;
}

@keyframes changeText{
  0%{font-size: 30px; font-weight: bold;font-style: italic; color: green}
  50%{font-size: 40px; font-weight: bolder; color: #2aabd2}
  100%{font-size: 17px; color: red}
}
</style>
